<template>
  <p-form-model
    ref="ruleForm"
    layout="inline"
    :model="form"
    :rules="addState ? rules : []"
  >
    <div class="connect">
      <div class="connect_form">
        <p-form-model-item
          v-if="!addState"
          label="拜访编号"
          style="width: 100%"
        >
          <span class="from-input">{{ form.visitNo }}</span>
        </p-form-model-item>
        <p-form-model-item
          label="拜访名称"
          prop="visitName"
          style="width: 100%"
        >
          <p-input
            v-if="addState"
            v-model="form.visitName"
            class="from-input"
          />
          <span v-if="!addState" class="from-input">{{ form.visitName }}</span>
        </p-form-model-item>
        <p-form-model-item
          label="拜访时间"
          prop="visitTime"
          style="width: 100%"
        >
          <p-date-picker
            v-if="addState"
            :value="form.visitTime"
            show-time
            class="from-input"
            :disabled-date="disabledDate"
            :allow-clear="false"
            placeholder="请选择时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleDeadLineChange"
            @ok="handleDeadLineOk"
          />
          <span v-if="!addState" class="from-input">{{ form.visitTime }}</span>
        </p-form-model-item>
        <!-- <p-form-model-item label="商机编号" style="width: 100%">
          <p-input
            v-model="form.opportunityNo"
            disabled
            class="from-input"
            style="background-color: #fff; cursor: default; color: #000"
          />
          <InputSearch class="searchIcon" @search="visibleOpportunity = true" />
        </p-form-model-item> -->
        <p-form-model-item
          label="拜访方式"
          prop="visitStyle"
          style="width: 100%"
        >
          <SelectDefault
            v-if="addState"
            v-model="form.visitStyle"
            :has-default="false"
            code="visit_style"
            class="from-input"
            :allow-clear="false"
            @validate="validate"
          />
          <span v-if="!addState" class="from-input">
            {{ visitStyleOptions[form.visitStyle] }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          label="拜访部门"
          prop="department"
          style="width: 100%"
        >
          <p-input
            v-if="addState"
            v-model="form.department"
            class="from-input"
          />
          <span v-if="!addState" class="from-input">{{ form.department }}</span>
        </p-form-model-item>
      </div>
      <div class="connect_form">
        <p-form-model-item
          v-if="!addState"
          label="拜访状态"
          style="width: 100%"
        >
          <span class="from-input">
            {{ visitStatusOptions[form.visitState] }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          label="客户简称"
          prop="customerName"
          class="form-item"
          style="width: 100%"
        >
          <p-input
            v-if="addState"
            v-model="form.customerName"
            disabled
            class="from-input"
            style="background-color: #fff; cursor: default; color: #000"
          />
          <InputSearch
            v-if="addState"
            :is-edit="true"
            class="searchIcon"
            @search="openDialog"
          />
          <span v-if="!addState" class="from-input">
            {{ form.customerName }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          label="拜访类型"
          prop="visitType"
          style="width: 100%"
        >
          <SelectDefault
            v-if="addState"
            v-model="form.visitType"
            :has-default="false"
            code="visit_type"
            class="from-input"
            :allow-clear="false"
            @validate="validate"
          />
          <span v-if="!addState" class="from-input">
            {{ visitTypeOptions[form.visitType] }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          label="紧急程度"
          prop="emergencyLevel"
          style="width: 100%"
        >
          <SelectDefault
            v-if="addState"
            v-model="form.emergencyLevel"
            :has-default="false"
            code="emergency_level"
            class="from-input"
            :allow-clear="false"
            @validate="validate"
          />
          <span v-if="!addState" class="from-input">
            {{ visitEmergencyOptions[form.emergencyLevel] }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          label="执行状态"
          prop="executionStatus"
          style="width: 100%"
        >
          <span>{{ isDoOptions[form.executionStatus] }}</span>
        </p-form-model-item>
      </div>
    </div>
    <p-form-model-item
      label="地址"
      prop="address"
      :class="addState ? 'isremarks' : 'remark'"
    >
      <p-textarea
        v-if="addState"
        v-model="form.address"
        style="height: 30px; width: 100%; resize: none"
      />
      <span v-if="!addState" class="from-input">
        {{ form.address }}
      </span>
    </p-form-model-item>
    <p-form-model-item
      label="拜访概要"
      prop="remark"
      :class="addState ? 'isremark' : 'remark'"
    >
      <p-textarea
        v-if="addState"
        v-model="form.remark"
        style="height: 60px; width: 100%; resize: none"
      />
      <span v-if="!addState" class="from-input">
        {{ form.remark }}
      </span>
    </p-form-model-item>
    <div v-if="isFoot" class="connect2">
      <div class="connect_form">
        <p-form-model-item
          label="创建人"
          prop="createUserName"
          style="width: 100%"
        >
          <span class="from-input">{{ form.createUserName }}</span>
        </p-form-model-item>
        <p-form-model-item label="创建人部门" style="width: 100%">
          <span class="from-input">{{ form.createUserDepartmentName }}</span>
        </p-form-model-item>
        <p-form-model-item
          label="创建时间"
          prop="createTime"
          style="width: 100%"
        >
          <span class="from-input">{{ form.createTime }}</span>
        </p-form-model-item>
      </div>
      <div class="connect_form">
        <p-form-model-item label="修改人" style="width: 100%">
          <span class="from-input">{{ form.updateUserName }}</span>
        </p-form-model-item>
        <p-form-model-item
          label="修改人部门"
          prop="updateUserGroup"
          style="width: 100%"
        >
          <span class="from-input">{{ form.updateUserDepartmentName }}</span>
        </p-form-model-item>
        <p-form-model-item
          label="修改时间"
          prop="updateTime"
          style="width: 100%"
        >
          <span class="from-input">{{ form.updateTime }}</span>
        </p-form-model-item>
      </div>
    </div>
    <!-- <div class="container">
      <BottomLine />
    </div> -->
    <DialogUserList :visible.sync="visibleCustomer" @change="changeCustomer" />
  </p-form-model>
</template>

<script>
import DialogUserList from '@/components/dialog/DialogUserList.vue';
import monent from 'moment';

export default {
  components: {
    DialogUserList,
  },
  props: {
    businessKeys: {
      type: Array,
      default: () => [],
    },
    curKeys: {
      type: Array,
      default: () => [],
    },
    selectCur: {
      type: Array,
      default: () => [],
    },
    selectBusiness: {
      type: Array,
      default: () => [],
    },
    form: {
      type: Object,
      default: () => ({}),
    },
    addState: {
      type: Boolean,
      default: false,
    },
    isFoot: {
      type: Boolean,
      default: false,
    },
    deleteFileId: {
      type: Array,
      default: () => [],
    },
    customerCode: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      headers: {
        authorization: 'authorization-text',
      },
      isload: false,
      orgGroupOptions: [],
      fileList: [],
      list: [],
      customerName: '',
      dataSource: [],
      visibleLegalNo: false,
      parentId: '',
      hasAll: false,
      visibleCustomer: false,
      visibleOpportunity: false,
      visibleModelName: false,
      isDetail: false,
      updateUserGroup: '',
      rules: {
        visitName: [
          { required: true, message: '请输入拜访名称', trigger: 'blur' },
          { max: 200, message: '输入的内容过长', trigger: 'blur' },
        ],
        visitTime: [
          { required: true, message: '请选择拜访时间', trigger: 'change' },
        ],
        visitStyle: [
          { required: true, message: '请选择拜访方式', trigger: 'change' },
        ],
        department: [
          { required: true, message: '请输入拜访部门', trigger: 'blur' },
        ],
        customerName: [
          { required: true, message: '请选择客户简称', trigger: 'change' },
        ],
        visitType: [
          { required: true, message: '请选择拜访类型', trigger: 'change' },
        ],
        emergencyLevel: [
          { required: true, message: '请选择紧急程度', trigger: 'change' },
        ],

        address: [{ max: 255, message: '输入的内容过长', trigger: 'blur' }],
        remark: [{ max: 1000, message: '输入的内容过长', trigger: 'blur' }],
      },
    };
  },
  computed: {
    isDoOptions() {
      return { 0: '未执行', 1: '已执行' };
    },
    orgOptions() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
      });
    },
    visitTypeOptions() {
      return this.$store.state.dictionary.dict['visit_type'] || {};
    },
    appOptions() {
      return this.$store.state.dictionary.dict['application'] || {};
    },
    visitStatusOptions() {
      return this.$store.state.dictionary.dict['visit_status'] || {};
    },
    visitStyleOptions() {
      return this.$store.state.dictionary.dict['visit_style'] || {};
    },
    visitEmergencyOptions() {
      return this.$store.state.dictionary.dict['emergency_level'] || {};
    },
  },
  watch: {},
  created() {},
  methods: {
    async openDialog(isDetai) {
      if (this.selectCur.length || this.selectBusiness.length) {
        try {
          await this.$confirm(
            '已关联线索或商机，重新选择客户将清除关联的线索和商机表，是否确认'
          );
          this.$emit('update:selectCur', []);
          this.$emit('update:curKeys', []);
          this.$emit('update:businessKeys', []);
          this.$emit('update:selectBusiness', []);
          this.visibleCustomer = true;
        } catch (error) {
          //
          // console.log('error: ', error);
        }
      } else {
        this.visibleCustomer = true;
      }
    },
    changeCustomer(val) {
      this.form.customerName = val?.label || '';
      this.form.customerCode = val?.key || '';
      this.$emit('update:customerCode', this.form.customerCode);
      this.validate();
    },
    upLoad() {
      this.$refs.upload?.uploader();
    },
    validate() {
      return new Promise((resolve) => {
        this.$refs.ruleForm.validate((valid) => {
          resolve(valid);
        });
      });
    },

    disabledDate(val) {
      return monent().endOf('day').subtract(1, 'day').valueOf() > val.valueOf();
    },

    handleDeadLineChange(value) {
      const formatTime = monent(value).format('YYYY-MM-DD HH:mm:ss');
      this.form.visitTime = formatTime;
    },
  },
};
</script>
<style lang="less" scoped>
.connect {
  width: 100%;

  display: flex;
  justify-content: center;
}
.connect2 {
  margin-top: 10px;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
}
.connect_form {
  width: 49%;
  height: 100%;
  display: inline-block;
}
// .from-input {
//   width: 320%;
// }
.row {
  margin-top: 20px;
}
/deep/ .poros-form-item {
  margin-bottom: 20px;
  height: 30px;
}
/deep/ .poros-form-item-label {
  width: 90px !important;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 250px);
}
.load {
  margin-top: 50px !important;
}
.form-item {
  position: relative;
  .copy-clue {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(110%, -25%);
  }
  .searchIcon {
    position: absolute;
    top: 0;
    right: 5px;
  }
}
.disinput {
  background-color: #fff;
  cursor: default;
  color: #000;
  width: 85%;
  margin-right: 2%;
}
.isremark {
  width: 100%;
  margin-left: 12px;
  height: 60px;
}
.isremarks {
  width: 100%;
  margin-left: 12px;
  height: 40px;
}
.remark {
  width: 100%;
  margin-left: 12px;
  height: auto;
}
// /deep/ .poros-upload-list {
//   display: inline-block;
// }
/deep/ .poros-upload-list-item {
  margin-left: 100px;
}
/deep/ .anticon {
  margin-left: 5px;
}
.container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  padding: 10px 24px;
  margin-top: 40px;
}
</style>
